<template>
  <div class="shipment-table">
    <el-table
      v-loading="loading"
      :data="shipmentList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="运单号" align="center" prop="shipmentCode" width="160">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleDetail(scope.row)">{{ scope.row.shipmentCode }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="运单状态" align="center" prop="statusText" width="100">
        <template slot-scope="scope">
          <el-tag
            :type="getStatusType(scope.row.status)"
            size="small"
          >
            {{ scope.row.statusText }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="目的省份" align="center" prop="destinationProvince" width="120" />
      <el-table-column label="目的城市" align="center" prop="destinationCity" width="120" />
      <el-table-column label="收货联系人" align="center" prop="receiverContact" width="100" />
      <el-table-column label="联系电话" align="center" prop="receiverPhone" width="120" />
      <el-table-column label="当前位置" align="center" width="100">
        <template slot-scope="scope">
          <span class="current-city">{{ scope.row.currentStatus.currentCity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="延时情况" align="center" width="80">
        <template slot-scope="scope">
          <el-tag
            :type="getDelayStatusType(scope.row.currentStatus.delayStatus)"
            size="mini"
          >
            {{ scope.row.currentStatus.delayStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="货物状况" align="center" width="80">
        <template slot-scope="scope">
          <el-tag
            :type="getGoodsConditionType(scope.row.currentStatus.goodsCondition)"
            size="mini"
          >
            {{ scope.row.currentStatus.goodsCondition }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="交接情况" align="center" width="80">
        <template slot-scope="scope">
          <el-tag
            :type="getHandoverStatusType(scope.row.currentStatus.handoverStatus)"
            size="mini"
          >
            {{ scope.row.currentStatus.handoverStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { parseTime } from '@/utils/ruoyi'
import {
  delayStatusOptions,
  goodsConditionOptions,
  handoverStatusOptions
} from '../api/comprehensive'

export default {
  name: 'ShipmentTable',
  props: {
    // 运单列表数据
    shipmentList: {
      type: Array,
      default: () => []
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 总条数
    total: {
      type: Number,
      default: 0
    },
    // 查询参数
    queryParams: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 10
      })
    }
  },
  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true
    }
  },
  methods: {
    // 解析时间
    parseTime,
    
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.$emit('selection-change', selection)
    },
    
    /** 详情按钮操作 */
    handleDetail(row) {
      this.$emit('detail', row)
    },
    
    /** 分页查询 */
    getList() {
      this.$emit('pagination', {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize
      })
    },
    
    /** 获取运单状态类型 */
    getStatusType(status) {
      const statusMap = {
        '0': 'info',     // 待发货
        '1': 'warning',  // 运输中
        '2': 'primary',  // 派送中
        '3': 'success',  // 已签收
        '4': 'danger'    // 异常
      }
      return statusMap[status] || 'info'
    },
    
    /** 获取延时状态类型 */
    getDelayStatusType(delayStatus) {
      const option = delayStatusOptions.find(item => item.value === delayStatus)
      return option ? option.type : 'info'
    },
    
    /** 获取货物状况类型 */
    getGoodsConditionType(goodsCondition) {
      const option = goodsConditionOptions.find(item => item.value === goodsCondition)
      return option ? option.type : 'info'
    },
    
    /** 获取交接情况类型 */
    getHandoverStatusType(handoverStatus) {
      const option = handoverStatusOptions.find(item => item.value === handoverStatus)
      return option ? option.type : 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.shipment-table {
  .current-city {
    font-size: 14px;
    color: #303133;
  }
}
</style>